<template>
  <div>
    <input class="abc" type="text">
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
// dom节点挂载完成后触发
onMounted(() => {

  //视图元素，获取form中的DOM节点并设置默认值，该默认值是data对象中的数据。
  let abc = document.querySelector(".abc");
  //定义对象
  let object = {
    _data: {
      username: "",
      usertype: ""
    }
  };
  // 实现用户输入数据与object对象内同名属性的同步修改
  // 在 object 对象上添加一个属性，该属性改变会触发setter函数改变 object._data.username 的值
  Object.defineProperty(object, "username", {
    get() { return object._data.username; },
    set(value) { object._data.username = value; }
  });
  Object.defineProperty(object, "usertype", {
    get() { return object._data.usertype; },
    set(value) { object._data.usertype = value; }
  });
  // 监听form元素事件，获取目标DOM节点的value并赋值给object对象中的响应属性，即可完成用户输入与对象值之间的数据绑定。
  abc.addEventListener("input", (event) => {
    object.username = event.target.value;//触发setter函数,赋值给object对象中的响应属性
    console.log(event)
    console.log("响应式数据", object);
  });

});
</script>

<style scoped>

</style>